<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">台账属性</h4>
</div>
<form id="defaultForm" method="post" class="form-horizontal" action="/project/indexManage/property_save">
    <div class="modal-body">

            <div class="form-group">
                <label class="col-lg-3 control-label">编号</label>
                <div class="col-lg-6">
                    <input type="text" class="form-control" name="code" onchange="doVerify()"/>
                </div>
                <sanp id = "accountText"></sanp>
            </div>

        <div class="form-group">
                <label class="col-lg-3 control-label">名称</label>
                <div class="col-lg-6">
                    <input type="text" class="form-control" name="name" />
                </div>
            </div>


            <div class="form-group">
                <label class="col-lg-3 control-label">适用对象</label>
                <div class="col-lg-6">
                    <select id = "opt" class="form-control" name="objName">
                        <option th:each="parameter:${objects}"  th:value="${parameter.id}" th:text="${parameter.name}"></option>
                    </select>
                </div>
            </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">所属类别</label>
                    <div class="col-lg-6" id = "p1">
                        <select  class="form-control" name="" >
                            <option th:each="parameter:${parameterTypes}" th:value="${parameter.id}" th:text="${parameter.name}"></option>
                        </select>
                    </div>
                    <div class="col-lg-6" id = "p2"  >
                        <select  class="form-control" name="">
                            <option th:each="parameter:${parameterTypes2}" th:value="${parameter.id}" th:text="${parameter.name}"></option>
                        </select>
                    </div>
                    <div class="col-lg-6" id = "p3" >
                        <select  class="form-control" name="">
                            <option th:each="parameter:${parameterTypes3}" th:value="${parameter.id}" th:text="${parameter.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-3 control-label">类型</label>
                    <div class="col-lg-6">
                        <select class="form-control" name="propertyType">
                            <option th:each="parameter:${propertyTypes}"   th:value="${parameter.id}" th:text="${parameter.name}"></option>
                        </select>
                    </div>
                </div>


        <div class="form-group">
            <label class="col-lg-3 control-label">是否二次修改</label>
            <div class="col-lg-6">
                <div class="col-lg-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="isShow" value="0" onclick="this.value=(this.value==0)?1:0">
                    </label>
                </div>
            </div>
        </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" id="saveBtn" class="btn btn-primary">保存</button>
    </div>
</form>

<script>
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }, fields: {
            code: {
                validators: {
                    notEmpty: {
                        message: 'CODE不能为空'
                    }
                }
            },
            name: {
                validators: {
                    notEmpty: {
                        message: '名称不能为空'
                    }
                }
            }
        }
    }).on('success.form.bv', function(e) {
        // 阻止默认提交事件
        e.preventDefault();

        // 获取form表单
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');
        console.log($('#defaultForm').serialize());

        $.ajax({
            url: $form.attr('action'),
            type: "post",
            data: $form.serialize(),
            dataType: 'json',
            success: function (result) {
                if (result.type == "alert") {
                    alert(result.message);
                }
                $("#modal").modal("hide");
                //刷新跳转至第一页
                // $("#dataTable").bootstrapTable("selectPage",1).bootstrapTable("refresh");
                $("#dataTable").bootstrapTable("selectPage", 1);
            },
            error: function () {
                console.log("error")
            }
        });
    });
    window.onload = function () {
        document.getElementById("defaultForm");
    }
/*****************************************编号唯一验证******************************************/
    function doVerify() {
    var cod = $("input[name ='code']").val()
    var accountText = $("#accountText")[0];
    if (cod != "") {
        $.ajax({
            url: "/project/indexManage/property_code",//后台查询验证的方法
            data: {"code": cod},//携带的参数
            type: "post",
            success: function (data) {
                //根据后台返回前台的msg给提示信息加HTML
                if (data) {
                    // 已经存在
                    accountText.innerHTML = "<font color='red' size='3'>" + data + "</font>"
                    //alert(cod)
                    $("#saveBtn").attr("disabled",true);
                }
                accountText.innerHTML = "<font color='red' size='3'>" + data + "</font>"
            }
        });
    }else {
        accountText.innerText = "";
    }
}


        /**********************************************通过适用对象,条件显示所有的所属类别*****************************************/
    $(function(){
           var p1 =  $("#p1").hide();
           var p2 =  $("#p2").hide();
           var p3 =  $("#p3").hide();
        var optionClass =  $("#opt option:selected").attr("value");
        if(optionClass == 1){
            p1.show();
            $("#p1 select").attr("name","parameterType");

        }
        $("#opt").on("change",function () {
            //选中改变的value值
             var optionClass =  $("#opt option:selected").attr("value");
             console.log(optionClass)
            if(optionClass == 1){
                p1.show();
                $("#p2 select").attr("name","");
                $("#p3 select").attr("name","");
                $("#p1 select").attr("name","parameterType");
                p2.hide();
                p3.hide();
            }
            //判断值给出部分类别
            if(optionClass == 2){
                p2.show();
                $("#p1 select").attr("name","");
                $("#p3 select").attr("name","");
                $("#p2 select").attr("name","parameterType");
                p1.hide();
                p3.hide();

            }
            if(optionClass == 3) {
                p3.show();
                $("#p1 select").attr("name","");
                $("#p2 select").attr("name","");
                $("#p3 select").attr("name","parameterType");
                p1.hide();
                p2.hide();
            }
        });

    })

</script>